<template>
  <div>
    <div class="wrapper" :style="{ right: handleDrawer ? '300px' : '0px' }">
      <div
        class="barItem"
        @mouseenter="showCartNum(item)"
        @click="clickBar(item)"
        v-for="(item, index) in resetConfig.menuList"
        :key="index"
      >
        <Tooltip placement="left" :content="item.title">
          <Icon size="20" :type="item.icon" />
          <p class="barTitle" v-if="item.titleShow">{{ item.title }}</p>
          <div class="circle" v-if="item.title === '购物车'">
            {{ cartNum < 100 ? cartNum : 99 }}
          </div>
        </Tooltip>
      </div>
    </div>
    <Drawer
      width="300"
      class="popup"
      :title="drawerData.title"
      :mask="resetConfig.mask"
      :closable="resetConfig.closable"
      v-model="handleDrawer"
    >
      <drawerPage :title="drawerData.title" />
    </Drawer>
  </div>
</template>

<script>
import Storage from "@/plugins/storage.js";
import Configuration from "./config";
import drawerPage from "./Drawer";
import { cartCount } from "@/api/cart.js";
export default {
  name: "Main",
  data() {
    return {
      resetConfig: Configuration, // 菜单项
      handleDrawer: false, // 是否可展开
      drawerData: "", // 菜单基础数据
    };
  },
  components: { drawerPage },
  computed: {
    // 用户信息
    userInfo() {
      return Storage.getItem("userInfo");
    },
    // 购物车商品数量
    cartNum() {
      return this.$store.state.cartNum;
    },
  },
  methods: {
    showCartNum(item) {
      // 获取购物车数量
      if (this.userInfo && item.title === "购物车") {
        this.getCartList();
      }
    },
    clickBar(val) {
      // tabbar点击操作
      if (!this.userInfo) {
        this.$Modal.confirm({
          title: "请登录",
          content: "<p>请登录后执行此操作</p>",
          okText: "立即登录",
          cancelText: "继续浏览",
          onOk: () => {
            this.$router.push({
              path: "/login",
              query: {
                rePath: this.$router.history.current.path,
                query: JSON.stringify(this.$router.history.current.query),
              },
            });
          },
        });
      } else {
        if (val.display) {
          this.handleDrawer = true;
          this.drawerData = val;
        } else {
          this.handleDrawer = false;
          switch (val.title) {
            case "会员中心":
              this.openBlank("/home");
              break;
            case "我的资产":
              this.openBlank("/home/MoneyManagement");
              break;
          }
        }
      }
    },
    openBlank(path) {
      // 新页面打开地址
      let routerUrl = this.$router.resolve({
        path: path,
      });
      window.open(routerUrl.href, "_blank");
    },
    getCartList() {
      // 获取购物车列表
      cartCount().then((res) => {
        this.$store.commit("SET_CARTNUM", res.result);
        this.Cookies.setItem("cartNum", res.result);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.wrapper {
  background-color: #000 !important;
}
.barItem {
  text-align: center;
  padding: 13px 0;

  cursor: pointer;
  color: #fff;
  &:hover {
    // background-color: $theme_color;
    .circle {
      // color: $theme_color;
      background-color: #fff;
    }
  }
}

.barTitle {
  writing-mode: vertical-lr;
  letter-spacing: 2px;
  padding: 4px 0;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background: $theme_color;
}

.wrapper {
  width: 40px;
  position: fixed;
  transition: 0.35s;
  height: 100%;
  z-index: 9999;
  background: $dark_background_color;
  top: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
::v-deep.popup .ivu-drawer-body {
  padding: 0 !important;
  background-color: #eee;
}
::v-deep.popup .ivu-drawer-wrap {
  z-index: 3001;
}
</style>
